/*
*   @Author: 1296
*   @Date: 2025-03-14
*   @Description: 轮播图
*/

<template>
  <swiper
      :modules="[Autoplay(), Pagination()]"
      :slides-per-view="1"
      :loop="true"
      :autoplay="{ delay: 2000 }"
      :pagination="{ clickable: true }"
      class="mySwiper"
  >
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image" alt="" class="carousel-image" />
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css';
import {Autoplay, Pagination} from "swiper/modules";

export default {
  name: 'CarouselComponent',
  methods: {
    Pagination() {
      return Pagination
    },
    Autoplay() {
      return Autoplay
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      images: [
        require('@/assets/Carousel/banner1.jpg'),
        require('@/assets/Carousel/banner2.jpg'),
        require('@/assets/Carousel/banner3.jpg'),
      ],
    };
  },
};
</script>

<style scoped>
.mySwiper {
  width: calc(800 / 1920 * 100vw);
  height: calc(560 / 1920 * 100vw);
  border-radius: 50px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.swiper-pagination-bullet) {
  background-color: #BBBBBB;
  opacity: 1;
}
:deep(.swiper-pagination-bullet-active) {
  background-color: #333333;
}

</style>
